<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				font-size: 12px;
			}
			
			.box {
				position: relative;
				width: 360px;
				height: 160px;
			}
			
			.box canvas {
				position: relative;
				z-index: 2;
				width: 100%;
				height: 100%;
			}
			
			.background {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background-color: red;
				width: 100%;
				height: 100%;
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="box" class="box">
			<canvas id="c1">
        		您的浏览器不支持canvas
    		</canvas>
			<div class="background j-back">
				<img src="img/HBuilder.png" />
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var content;
				var moveNum = 0; //每次触摸移动都会加1
				var isDown = false;
				var fontEm = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);
				var canvas = document.getElementById("c1");
//				var j-back=document.getElementsByTagName("j-back");
				var workFlow = {
					init: function() {
						this.settingCanvas();
						this.bindEvent();
					},
					bindEvent: function() {
						var _this = this;
						if(canvas != null) {
							//PC端的处理
							canvas.addEventListener("mousemove", _this.eventMove, false);
							canvas.addEventListener("mousedown", _this.eventDown, false);
							canvas.addEventListener("mouseup", _this.eventUp, false);
							canvas.addEventListener("mouseout", _this.eventOut, false);
							//移动端的处理
							canvas.addEventListener('touchstart', _this.eventDown, false);
							canvas.addEventListener('touchend', _this.eventUp, false);
							canvas.addEventListener('touchmove', _this.eventMove, false);
							canvas.addEventListener('mouseout', _this.eventOut, false);
						}
					},
					settingCanvas: function() {
						canvas.width = canvas.clientWidth;
						canvas.height = canvas.clientHeight;
						content = canvas.getContext("2d");
						var image = new Image();
						image.src = "https://ts-dingup-onlinetest.oss-cn-beijing.aliyuncs.com/img/home/shopmask.jpg";
						image.onload = function() {
							var imgHeight = canvas.height,
								imgWidth = canvas.width;
							var sx = (canvas.width - imgWidth) / 2,
								sy = (canvas.height - imgHeight) / 2;
							// content.globalCompositeOperation = 'source-over';
							content.drawImage(image, sx, sy, imgWidth, imgHeight);
							$('.j-back').show(); //加载完图片后在显示底层的内容
						};
						// 填充灰色涂层
						/*  content.fillStyle = '#eaeaea';
						 content.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);
						 content.fill();

						 // 绘制涂层文字
						 content.font = "Bold 40px Microsoft YaHei";
						 content.textAlign = "center";
						 content.fillStyle = "#999999";
						 content.fillText("刮一刮，同时默念“出8块”", canvas.width / 2, (canvas.height / 2 ));
						// 把这个属性设为这个就可以做出圆形橡皮擦的效果
						content.globalCompositeOperation = 'destination-out';*/
						// 获取抽奖结果
					},
					eventDown: function(e) {
						// 鼠标按下和触摸开始
						e.preventDefault();
						content.globalCompositeOperation = 'destination-out';
						isDown = true;
					},
					eventOut: function(e) {
						// 鼠标移出涂层区域后
						e.preventDefault();
						isDown = false;
					},
					eventUp: function(e) {
						// 鼠标抬起和触摸结束
						var _this = this;
						e.preventDefault();
						isDown = false;
						workFlow.checkFinish();
					},
					eventMove: function(e) {
						moveNum++;
						// 鼠标移动和触摸移动
						e.preventDefault();
						if(e.changedTouches) {
							e = e.changedTouches[e.changedTouches.length - 1];
						}
						if(isDown) {
							var conDivEle = document.getElementById("box");
							var oX = canvas.offsetLeft + conDivEle.offsetLeft,
								oY = canvas.offsetTop + conDivEle.offsetTop;
							var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
								y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

							//画360度的弧线，就是一个圆，因为设置了content.globalCompositeOperation = 'destination-out';
							//画出来是透明的
							content.beginPath();
							content.arc(x, y, fontEm * 2, 0, Math.PI * 2, true);
							canvas.style.display = 'none';
							canvas.offsetHeight;
							canvas.style.display = 'inherit';
							content.fill();
						}
					},
					checkFinish: function() {
						if(moveNum > 100) {
							alert('finish');
							content.clearRect(0, 0, canvas.width, canvas.height);
							$('canvas').hide();
						}
					}
				};
				workFlow.init();
//				var a = content.getImageData(0, 0, canvas.width, canvas.height);
//				var j = 0;
//				for(var i = 3; i < a.data.length; i += 4) {
//					if(a.data[i] == 0) {
//						j++
//					};
//				}
//
//				if(j >= (a.data.length / 4 * 0.3)) {
//					alert('finish');
//					content.clearRect(0, 0, canvas.width, canvas.height);
//					$('canvas').hide();
//				}
			}
		</script>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
	</body>

</html>